<style lang="less">
  @import './demos.less';
</style>
<template>
  <div>
    <Form :model="seachForm" inline :label-width="80" v-show="!isEditing">
      <FormItem prop="name" :label="$t('name')">
        <Input v-model="seachForm.name" placeholder="请输入查询文字"></Input>
      </FormItem>
      <FormItem prop="address" label="地址">
        <Input v-model="seachForm.address" placeholder="请输入查询文字"></Input>
      </FormItem>
      <FormItem>
        <Button icon="ios-search" @click="seacherSubmit('seacherForm')">查询</Button>
      </FormItem>
    </Form>
    <ButtonGroup v-show="!isEditing">
      <Button icon="ios-add" @click="btnAddClick">新增</Button>
      <Button icon="ios-create" @click="btnEditClick" :disabled="!currentRow">修改</Button>
      <Button icon="ios-trash" @click="btnDelClick" :disabled="!currentRow">删除</Button>
    </ButtonGroup>
    <Table v-show="!isEditing" border highlight-row ref="currentRowTable" @on-current-change="tableCurrentChange" :columns="columns" :data="datas"></Table>
    <Page :total="pageInfo.totalRows" @on-change="pageNumberChange" v-show="!isEditing" />
    <Form v-if="isEditing" :model="dataForm" :label-width="80">
      <FormItem prop="name" :label="$t('name')">
        <Input v-model="dataForm.name" placeholder="Enter something..."></Input>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="btnSaveClick">保存</Button>
        <Button style="margin-left: 8px" @click="btnCancelClick">取消</Button>
      </FormItem>
    </Form>
  </div>
</template>
<script>
  import {fetch,fetchOne,add,update,dele} from '@/api/demos'
  export default {
    name: 'demos',
    data() {
      return {
        message: 'Hello Vue!',
        currentRow: null,
        isEditing: false,
        seachForm: {
          name: '',
          address: ''
        },
        pageInfo: {
          pageNumber: 1,
          pageSize: 10,
          totalRows: 0
        },
        dataForm: {},
        columns: [{
          type: 'index',
          width: 60,
          align: 'center'
        }, {
          title: this.$t('name'),
          key: 'name'
        }],
        datas: []
      }
    },
    created() {
      console.log('created message is: ' + this.message);
      this.queryList();
    },
    mounted() {
      console.log('mounted message is: ' + this.message);
    },
    methods: {
      seacherSubmit: function() {
        console.log(this.seacherForm);
        this.pageInfo.pageNumber = 1;
        this.queryList();
      },
      queryList: function() {
        var queryParams = {
          name: this.seachForm.name,
          pageNumber: this.pageInfo.pageNumber,
          pageSize: this.pageInfo.pageSize
        };
        fetch(queryParams).then(res => {
          this.datas = res.data.rows;
          this.pageInfo.totalRows = parseInt(res.data.total);
        });
      },
      pageNumberChange: function(pagenum) {
        this.pageInfo.pageNumber = pagenum;
        this.queryList();
      },
      tableCurrentChange: function(currentRow, oldCurrentRow) {
        this.currentRow = currentRow;
      },
      btnAddClick: function() {
        this.dataForm = {};
        this.isEditing = true;
      },
      btnEditClick: function() {
        this.dataForm = this.currentRow;
        this.isEditing = true;
      },
      btnDelClick: function() {
        this.$Modal.confirm({
          title: '删除',
          content: '确定要删除选中的信息吗?',
          onOk: () => {
            this.delData();
          }
        });
      },
      btnSaveClick: function() {
        if (this.dataForm.id) {
          update(this.dataForm).then(res => {
            if (res.data && res.data.affectedRows > 0) {
              this.$Message.success('保存成功!');
              this.queryList();
              this.isEditing = false;
            } else {
              this.$Message.error(res.error);
            }
          });
        } else {
          add(this.dataForm).then(res => {
            if (res.data && res.data.affectedRows > 0) {
              this.$Message.success('保存成功!');
              this.queryList();
              this.isEditing = false;
            } else {
              this.$Message.error(res.error);
            }
          });
        }
      },
      btnCancelClick: function() {
        this.isEditing = false;
      },
      delData: function() {
        dele(this.currentRow.id).then(res => {
          if (res && res.data.affectedRows > 0) {
            this.$Message.success('删除成功!');
            this.queryList();
          } else {
            this.$Message.error('删除失败!');
          }
        });
      }
    }
  }

</script>
